<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>云钢</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        body{ background: white; }
        .aui-bar-light{ color: black; }
        .aui-bar-nav.aui-bar-light .aui-iconfont{ color: black; }
        .yginput{ border: 1px solid #CDCDCD !important; border-radius: 2.2rem; }
        .yanzheng{ width: 8rem; }
        .fasong{ background: #3FABF4; color: #ffffff; border-radius: 10rem; }
        .login{ box-shadow: 0 0 2px #3FABF4; color: #FFFFFF; border-radius: 2rem; height: 2rem; line-height: 2rem; font-size: 0.8rem; margin-top: 1rem; background-image: linear-gradient(#3FABF4, #4CD2E5); }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-light" id="header">
        <a class="aui-pull-left aui-btn" onclick="backpage()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">用户注册</div>
    </header>
    <div id="app" v-cloak>
        <img src="../../image/public/bg.png" width="100%">
        <div class="text-bold text-center text-md" style="letter-spacing:2px;">一体化智能可视电子交易平台</div>
        <div class="text-bold text-center text-xs margin-top text-gray text-opacity" style="transform: scale(0.9, 0.9);">Integrated intelligent visual electronic trading platform</div>
        <div class="aui-content aui-margin-b-15" style="padding: 1.5rem;">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item yginput">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-mobile"></i>
                        </div>
                        <div class="aui-list-item-input">
                            <input type="number" v-model="mobile" placeholder="请输入手机号">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item yginput margin-top">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-lock"></i>
                        </div>
                        <div class="aui-list-item-input" style="width: 63%;">
                            <input type="number" v-model="code" placeholder="短信验证码">
                        </div>
                        <div class="aui-list-item-label-icon yanzheng">
                            <div class="aui-btn fasong text-xy" id="jstime" v-on:click="sendCode()">{{info}}</div>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item yginput margin-top">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-lock"></i>
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" v-model="password" placeholder="请输入密码">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item yginput margin-top">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-lock"></i>
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" v-model="repassword" placeholder="请再次输入密码">
                        </div>
                    </div>
                </li>
                <li class="margin-top">
                    <div class="">
                        <label>
                            <input class="aui-checkbox" type="checkbox" v-model="xieyi">
                            <span class="text-xs">我已阅读并同意 </span>
                        </label>
                        <span class="text-xs text-blue">《用户注册协议》</span>
                    </div>
                </li>
                <li class="margin-top">
                    <div class="aui-btn aui-btn-block login" v-on:click="setReg()">立即注册</div>
                </li>
                <li class="margin-top">
                    <div class="text-center text-gray" v-on:click="setLogin()">已有账号，去登录</div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">

    var vm = {
        el: '#app',
        data: {
            list: [],
            xieyi: false,
            mobile: '',
            password: '',
            repassword: '',
            code: '',
            agree: 'on',
            info: '获取验证码',
            miao: 0,
            getCode: ''
        },
        mounted: function(){
            this.getList();
        },
        methods: {
            sendCode: function(){
                let that = this;
                if(that.mobile == ''){
                    api.toast({
                        msg:"请填写手机号",
                        duration:1000
                    });
                    return false;
                }
                if(that.miao == 0){
                    api.showProgress({
                        title: '发送中...',
                        modal: true
                    });
                    api.ajax({
                        url: $api.apiUrl+'login/register_apple',
                        method: 'post',
                        timeout: 30,
                        dataType: 'json',
                        returnAll: false,
                        data: {
                            values: {
                                phone: that.mobile
                            }
                        }
                    }, function(ret, err){
                        console.log(JSON.stringify(ret))
                        api.hideProgress();
                        api.toast({
                            msg:ret.msg,
                            duration:1000
                        });
                        // 8981
                        if (ret.code != 200) {
                            that.miao = 180;
                            that.getCode = ret.data;
                            let jishiqi = setInterval(function(){
                                console.log(that.miao)
                                that.miao -= 1;
                                that.info = that.miao+'s';
                                if(that.miao == 0){
                                    that.info = '获取验证码';
                                    clearInterval(jishiqi);
                                }
                            },1000)
                        }
                    })
                        
                }
            },
            setReg: function(){
                let that = this;
                
                if(that.xieyi == false){
                    api.toast({
                        msg:"请阅读用户注册协议",
                        duration:1000
                    });
                    return false;
                }else if(that.mobile == ''){
                    api.toast({
                        msg:"请填写手机号",
                        duration:1000
                    });
                    return false;
                }else if(that.password == ''){
                    api.toast({
                        msg:"请填写密码",
                        duration:1000
                    });
                    return false;
                }else if(that.password != that.repassword){
                    api.toast({
                        msg:"两次密码不一致",
                        duration:1000
                    });
                    return false;
                }else if(that.code == ''){
                    api.toast({
                        msg:"请填写验证码",
                        duration:1000
                    });
                    return false;
                }else if(that.code != that.getCode){
                    api.toast({
                        msg:"验证码错误",
                        duration:1000
                    });
                    return false;
                }

                api.showProgress({
                    title: '注册中...',
                    modal: true
                });

                api.ajax({
                    url: $api.apiUrl+'login/register',
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            phone: that.mobile,
                            password: that.password,
                            repassword: that.repassword,
                            code: that.code,
                            agree: that.agree
                        }
                    }
                }, function(ret, err){
                    console.log(JSON.stringify(ret))
                    api.hideProgress();
                    api.toast({
                        msg:ret.msg,
                        duration:1000
                    });
                    if (ret.code == 200) {
                        setTimeout(function(){
                            api.closeWin({
                                name: api.winName
                            })
                        },1000)
                    }
                })
            },
            getList: function(){
                let that = this;
            }
        }
    }
    apiready = function() {
        $api.fixStatusBar(
            $api.byId("header")
        );
        window.app = new Vue(vm);


    };

    function backpage(){
        api.closeWin({
            name: api.winName
        })
        
    }

</script>

</html>
